<template>
  <div class="map_box" ref="map">
    map
  </div>
</template>
<script setup lang='ts' name='map'>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';
import chinaJson from './china.json'
let map = ref()
//注册中国地图
echarts.registerMap('china', chinaJson as any)
onMounted(() => {
  let myecharts = echarts.init(map.value)
  let option = {
    geo: {
      map: 'china',//中国地图
      roam: true,//鼠标缩放效果
      //位置
      left: 50,
      top: 100,
      right: 50,
      bottom: 0,
      label: {//地图文字设置
        show: true,//文字是否显示
        color: 'white',
        fontSize: 14,
      },
      itemStyle: {//多边形样式
        normal: {
          areaColor: '#031525',
          borderColor: '#076ba1'
        },
        opacity: .8
      },
      //地图高亮效果
      emphasis: {
        itemStyle: {
          color: 'red',
        },
        label: {
          fontSize: 40
        },
      }
    },
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
    series: [
      {
        type: 'lines',
            zlevel: 2,
            effect: {
                show: true,
                period: 4, //箭头指向速度，值越小速度越快
                trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow', //箭头图标
                symbolSize: 7, //图标大小
            },
            lineStyle: {
                normal: {
                    color: '#1DE9B6',
                    width: 1, //线条宽度
                    opacity: 0.1, //尾迹线条透明度
                    curveness: .3 //尾迹线条曲直度
                }
            },
             data: [
                { coords: [[111.670801, 40.818311],[123.429096, 41.796767]], lineStyle: { color: '#4ab2e5' } }
                , { coords: [[126.642464, 45.756967],[121.472644, 31.231706]], lineStyle: { color: '#4fb6d2' } }
                , { coords: [[87.617733, 43.792818],[76.172825, 39.713431]], lineStyle: { color: '#52b9c7' } }
                , { coords: [[87.617733, 43.792818],[86.150969, 41.768552]], lineStyle: { color: '#5abead' } }
                , { coords: [[87.617733, 43.792818],[79.92533, 37.110687]], lineStyle: { color: '#f34e2b' } }
                , { coords: [[87.617733, 43.792818],[81.317946, 43.92186]], lineStyle: { color: '#f56321' } }
                , { coords: [[87.617733, 43.792818],[88.13963, 47.848393]], lineStyle: { color: '#f56f1c' } }
                , { coords: [[87.617733, 43.792818],[93.51316, 42.833248]], lineStyle: { color: '#f58414' } }
            ]
      }
    ]
  }
  myecharts.setOption(option)
})
</script>


<style scoped></style>